<template>
    <div class="bgc11">
      <div class="flx-bm bgc14 px15 h60">
        <Logo />
        <div class="logo-link fz21">
          <nuxt-link :to="{name: 'cart', params: {uid: 'uid_1'}}" class="clr14 pos-r w21 h21 d-inline-block">
            <awe-icon name="shopping-cart"/>
            <notify-dot :dot-num="groupedData.cart.length" class="logo-link-dot" />
          </nuxt-link>
          <a href="/" class="pl9 clr14 w21 h21 d-inline-block">
            <awe-icon />
          </a>
        </div>
      </div>
      <div class="mt10 bgc14 p40">
        <div class="flx-mm">
          <img :src="usr.icon" class="usr-icon w84 h84" alt="">
        </div>
        <div class="flx-mm mt6 fz15">{{usr.name}}</div>
      </div>
      <List>
        <List-item :to="{name: 'bill', params: {uid: 'uid_1'}}">查全部订单</List-item>
        <li class="bgc14">
          <div class="ml20 pr20 flx-bm bdt11">
            <nuxt-link v-for="(i,n) in subMenu" :to="{name: 'bill', params: {uid: uid, activeTab: i.title}}" :key="n" class="txt-c lh20 my20 pos-r">
              <awe-icon :name="i.icon" class="sub-menu-icon"/><br>
              <span class="clr5">{{i.title}}</span>
              <notify-dot :dot-num="groupedData[i.name].length" v-if="groupedData[i.name].length" class="sub-menu-dot"/>
            </nuxt-link>
          </div>
        </li>
        <List-item v-for="(i,n) in menu" :key="n" :to="i.url" :gap="i.title === '我的优惠券' || i.title === '购物说明' ? true : false">
          {{i.title}}
        </List-item>
      </List>
    </div>
</template>

<script>
import NotifyDot from 'assets/myTools/vueTools/com/common/notify-dot/notify-dot'
import AweIcon from 'assets/myTools/vueTools/com/common/awe-icon/awe-icon'
import Logo from 'assets/myTools/vueTools/com/common/logo/logo'
import List from 'assets/myTools/vueTools/com/common/list/list'
import ListItem from 'assets/myTools/vueTools/com/common/list/list-item'
import {myTools} from "../assets/myTools/jsTools/jsTools"

export default {
  components: {
    NotifyDot,
    AweIcon,
    Logo,
    List,
    ListItem
  },
  data() {
    return {
      usr: {},
      groupedData: {
        succeed: [],
        unpaid: [],
        dispatched: [],
        unget: [],
        closed: [],
        cart: [],
        ex: []
      },
      menu: [
        {
          title: '我的优惠券',
          url: '/'
        },
        {
          title: '收货地址管理',
          url: '/'
        },
        {
          title: '购物说明',
          url: '/'
        },
        {
          title: '联系客服',
          url: '/'
        },
        {
          title: '商务合作',
          url: '/'
        },
        {
          title: '意见反馈',
          url: '/'
        }
      ],
      subMenu: [
        {
          title: '待付款',
          name: 'unpaid',
          url: '/',
          icon: 'credit-card'
        },
        {
          title: '待发货',
          name: 'dispatched',
          url: '/',
          icon: 'truck'
        },
        {
          title: '待收货',
          name: 'unget',
          url: '/',
          icon: 'cube'
        },
        {
          title: '退换货',
          name: 'ex',
          url: '/',
          icon: 'refresh'
        },
      ],
      uid: ''
    }
  },
  async beforeMount() {
    this.uid = myTools.getSession('usr').uid
    let usrData = await this.getUsrData()
    this.usr = usrData
    //console.log(this.usr)

    usrData.bills.forEach(i => {
      switch (i.status) {
        case 'successed':
          this.groupedData.succeed.push(i)
          break
        case 'unpaid':
          this.groupedData.unpaid.push(i)
          break
        case 'dispatched':
          this.groupedData.dispatched.push(i)
          break
        case 'unget':
          this.groupedData.unget.push(i)
          break
        case 'closed':
          this.groupedData.closed.push(i)
          break
        case 'ex':
          this.groupedData.ex.push(i)
          break
      }
    })
    usrData.cart.forEach(i => {
      this.groupedData.cart.push(i)
    })
    //console.log(this.groupedData)
  },
  computed: {

  },
  methods: {
    async getUsrData() {
      let {status, data} = await this.$axiosApi.postUsrData({
          uid: myTools.getSession('usr').uid
      })
      if (status === 200 && data.code === 0) {
        return data.data
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.usr-icon
  border-radius 50%
.sub-menu-icon
  font-size 20px

.sub-menu-dot
  transform translate(-5px, -5px)
.logo-link-dot
  transform translate(5px, 2px)
</style>
